<template>
   <van-form :readonly="false"  input-align="right"  :disabled="false">
    <van-multiple-select-dict @dictChange="handleChange" checked-color="#ee0a24" :max="2" label="性别(基础用法)" label-width="100px" input-align="right" dictType="SEX" placeholder="请选择性别" v-model="value1" >
      <template #icon="props">
        <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
      </template>
    </van-multiple-select-dict>
    <van-multiple-select-dict @dictChange="handleChange" shape="square" label="性别(必选)" required label-width="100px" input-align="right" dictType="SEX" placeholder="请选择性别" v-model="value2" ></van-multiple-select-dict>
    <van-multiple-select-dict @dictChange="handleChange" label="性别(过滤选项1)"  icon-size="26px" height="300px" label-width="110px" input-align="right" :dictType="{type: 'FRUITS', filters: '9', reverse: true}" placeholder="请选择性别" v-model="value3" ></van-multiple-select-dict>
    <van-multiple-select-dict @dictChange="handleChange" label="性别(过滤选项2)" :filterDataFun="filterDataFun" label-width="110px" input-align="right" :dictType="'FRUITS'" placeholder="请选择性别" v-model="value13" ></van-multiple-select-dict>
    <van-multiple-select-dict @dictChange="handleChange" label="性别(禁用选项1)" label-width="110px" input-align="right" :dictType="'FRUITS'" :disableObj="{disableValue: '9'}" placeholder="请选择性别" v-model="value4" ></van-multiple-select-dict>
    <van-multiple-select-dict @dictChange="handleChange" label="性别(禁用选项2)" :disabledDataFun="disabledDataFun" label-width="110px" input-align="right" :dictType="'FRUITS'"  placeholder="请选择性别" v-model="value14" ></van-multiple-select-dict>
    <van-multiple-select-dict @dictChange="handleChange" label="性别(禁用+过滤)" label-width="120px" input-align="right" :dictType="{type: 'FRUITS', filters: '1', reverse: true}" :disableObj="{disableValue: '9'}" placeholder="请选择性别" v-model="value5" ></van-multiple-select-dict>
    <van-multiple-select-dict @dictChange="handleChange" label="性别(keyValue)" keyValue label-width="120px" input-align="right" dictType="FRUITS" placeholder="请选择性别" v-model="value6" ></van-multiple-select-dict>
    <van-multiple-select-dict @dictChange="handleChange" label="祝(自定义数据1)" label-width="120px" input-align="right" :data="list1" placeholder="请选择性别" v-model="value7" ></van-multiple-select-dict>
    <van-multiple-select-dict @dictChange="handleChange" label="福(自定义数据2)" :format="{label: 'label2', value: 'value2'}" label-width="120px" input-align="right" :data="list2" placeholder="请选择性别" v-model="value8" ></van-multiple-select-dict>
    <van-multiple-select-dict @dictChange="handleChange" label="你(自定义数据3)" label-width="120px" input-align="right" :data="list3" placeholder="请选择性别" v-model="value9" ></van-multiple-select-dict>
    <van-multiple-select-dict @dictChange="handleChange" label="性别(赋值)" label-width="100px" input-align="right" dictType="SEX" placeholder="请选择性别" v-model="value10" ></van-multiple-select-dict>

    <van-multiple-select-dict @dictChange="handleChange" label="性别(赋值+插槽)" label-width="100px" input-align="right" dictType="SEX" placeholder="请选择性别" v-model="value10" >
      <template #cellValue>
        cellValue
      </template>
      <template #cellLabel>
        cellLabel
      </template>
      <template #cellExtra>
        cellExtra
      </template>
      
    </van-multiple-select-dict>
   </van-form>
</template>

<script>
export default {
  data() {
    return {
      activeIcon: "https://img01.yzcdn.cn/vant/user-active.png",
      inactiveIcon: "https://img01.yzcdn.cn/vant/user-inactive.png",
      result: [],
      value1: [],
      value2: [],
      value3: [],
      value4: [],
      value5: [],
      value6: [],
      value7: [],
      value8: [],
      value9: [],
      value10: ["1"],
      value13: [""],
      value14: [""],
      list1: [],
      list2: [],
      list3: ["七星高照", "八方来财", "九九同心"]
    }
  },
  created() {
    setTimeout(() => {
      this.value7 = ["2"]
      this.value1 = ["2"]
      this.list1 = [ 
        {
          label: "一帆风顺",
          value: "1"
        },
        {
          label: "二龙腾飞",
          value: "2"
        },
        {
          label: "三羊开泰",
          value: "3",
          disabled: true
        }
      ]
      this.list2 = [ 
        {
          label2: "四季平安",
          value2: "4"
        },
        {
          label2: "五福临门",
          value2: "5"
        },
        {
          label2: "六六大顺",
          value2: "6"
        }
      ]
    }, 1000)
  },
  methods: {
    handleChange(val) {
      console.log(this.value7)
      console.log(val)
    },
    filterDataFun(list) {
      return list.filter(item => ["1", "2"].includes(item.value))
    },
    disabledDataFun(item) {
      return ["9"].includes(item.value)
    }
  }
}
</script>

<style>

</style>